<template>
	<div class="padding-across-10 main" v-loading="loading" element-loading-text="拼命加载中">
		<div>
			<headerOpreate style="margin-right: 10px;padding-top: 5px" :opreate-datas="opreateDatas" v-on:executeAction="executeAction"></headerOpreate>
		</div>
		<div>
			<div style="padding-top: 5px;float: left;padding-bottom: 3px">
				<span style="font-size: 13px;font-weight: bold">馆藏地</span>
				<el-select size="small" v-model="location" placeholder="暂无数据" style="width: 120px;" @change="selectLocation">
					<el-option v-for="item in locationDatas" :key="item.LocationKeyId" :label="item.Name" :value="item.LocationKeyId">
					</el-option>
				</el-select>
				<el-select size="small" v-model="value" :placeholder="$t('message.selectModeAlert')" style="width: 108px;margin-right: 2px" @change="selectType">
					<el-option label="书名/作者" :value="0"></el-option>
					<el-option label="条码" :value="1"></el-option>
					<el-option label="标签" :value="2"></el-option>
				</el-select>
				<el-input size="small" style="width: 200px;" v-model="searchModel" :placeholder="contentHint">
					<el-button id="searchBookData" slot="append" icon="search" @click="searchBook"></el-button>
				</el-input>
				<el-select size="small" v-model="rank" :placeholder="$t('message.selectModeAlert')" style="width: 80px;margin-right: 5px" @change="selectRank">
					<el-option label="降序" :value="0"></el-option>
					<el-option label="升序" :value="1"></el-option>
				</el-select>
			</div>
			<div style="float: right;padding-top: 5px">
				<span style="font-size: 13px;font-weight: bold">{{$t('message.start')}}</span>
				<el-date-picker :editable="false" :clearable="false" v-model="startTime" size="small" type="date" placeholder="选择起始日期" @change="changeStartTime"></el-date-picker>
				<span style="font-size: 13px;font-weight: bold">{{$t('message.end')}}</span>
				<el-date-picker :editable="false" :clearable="false" size="small" type="date" v-model="endTime" placeholder="选择结束日期" @change="changeEndTime"></el-date-picker>
			</div>
		</div>
		<el-table border style="width: 100%;" @selection-change="handleSelectionChange" :data="tableData">
			<el-table-column label="书名" align="center">
				<template slot-scope="scope">
					<a style="color: #50bfff;text-decoration: underline;cursor: pointer" @click="showBookDoubanInfo(scope.row)">{{ scope.row.name }}</a>
				</template>
			</el-table-column>
			<el-table-column label="条码" align="center" prop="barcode"></el-table-column>
			<el-table-column label="类型" align="center" prop="type"></el-table-column>
			<el-table-column label="馆藏地" align="center" prop="location"></el-table-column>
			<el-table-column label="位置" align="center" prop="position"></el-table-column>
			<el-table-column label="借阅次数" align="center" prop="borrowcount"></el-table-column>
			<!-- <el-table-column label="类型" align="center" prop="type"></el-table-column> -->
			<el-table-column label="状态" align="center">
				<template slot-scope="scope">
					<el-tag type="danger" v-if="scope.row.status === 1">不存在</el-tag>
					<el-tag type="warning" v-if="scope.row.status === 2">外借</el-tag>
					<el-tag type="success" v-if="scope.row.status === 3">在库</el-tag>
				</template>
			</el-table-column>
		</el-table>
		<div class="block" style="text-align:right;margin-bottom:50px;padding-top: 3px;padding-bottom: 5px">
			<el-pagination @current-change="handleCurrentChange" @size-change="handleSizeChange" :current-page="currentPage" :page-size="pageSize" :page-sizes="[10,20,30,40,50]" layout="total,sizes, prev, pager, next, jumper" :total="totalSize">
			</el-pagination>
		</div>
	</div>
</template>
<script>
	import $ from 'jquery'
	import { GloabFun, HttpServer } from '../../../../assets/js/common.js'
	import headerOpreate from '../../../../components/headerOpreate'
	let id = 1000;
	var date = new Date();
	export default {
		components: {
			headerOpreate
		},
		data() {
			document.onkeydown = function(event) {
				var e = event || window.event;
				if(e && e.keyCode == 13) { //回车键的键值为13
					$("#searchBookData").click(); //调用登录按钮的登录事件
				}
			};
			Date.prototype.format = function(format) {
				var date = {
					"M+": this.getMonth() + 1,
					"d+": this.getDate()
				};
				if(/(y+)/i.test(format)) {
					format = format.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length));
				}
				for(var k in date) {
					if(new RegExp("(" + k + ")").test(format)) {
						format = format.replace(RegExp.$1, RegExp.$1.length == 1 ?
							date[k] : ("00" + date[k]).substr(("" + date[k]).length));
					}
				}
				return format;
			}
			return {
				startTime: new Date((date.getTime() - 3600 * 1000 * 24 * 30)).format('yyyy-MM-dd') + ' 00:00:00',
				endTime: date.format('yyyy-MM-dd') + ' 23:59:59',
				rank: 0,
				hasLogin: false,
				isReload: false,
				radio: '',
				searchHistory: [],
				item: {},
				value: 0,
				contentHint: '书名/作者 查询',
				searchModel: '',
				rank: 0,
				tableData: [],
				content: '',
				multipleSelection: [],
				currentPage: 1,
				pageSize: 10,
				totalSize: 0,
				loading: false,
				locationDatas: [],
				location: null,
				opreateDatas: [{
					show: true,
					size: "small",
					type: 'primary',
					icon: 'el-icon-eleg-icon_refresh el-icon--left',
					name: '刷新',
					action: 'reloadDatas'
				}]
			}
		},
		props: {
			templateObj: {
				type: Object,
				default: function() {
					return {};
				}
			}
		},
		methods: {
			executeAction(action) {
				if(action) {
					this[action]();
				}
			},

			querySearch(queryString, cb) {
				var restaurants = this.searchHistory;
				var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
				// 调用 callback 返回建议列表的数据
				cb(results);
			},
			createFilter(queryString) {
				return(restaurant) => {
					return(restaurant.value.indexOf(queryString.toLowerCase()) === 0);
				};
			},
			handleSelect(item) {
				// console.log(item);
			},
			handleCurrentChange(val) {
				this.currentPage = val;
				this.searchBook();
			},
			handleSizeChange(val) {
				this.pageSize = val;
				this.searchBook();
			},
			selectRank() {
				this.searchBook();
			},
			changeStartTime() {
				this.startTime = this.startTime.format('yyyy-MM-dd') + ' 00:00:00';
				this.searchBook();
			},
			changeEndTime() {
				this.endTime = this.endTime.format('yyyy-MM-dd') + ' 23:59:59';
				this.searchBook();
			},
			//选择查询类型
			selectType() {
				if(this.value === 0) {
					this.contentHint = '书名/作者 查询';
				} else if(this.value === 1) {
					this.contentHint = '请输入完整的图书条码';
				} else {
					this.contentHint = '请输入完整的图书标签';
				}
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			formateSelection() {
				var result = [],
					array = this.multipleSelection;
				for(var i = 0; i < array.length; i++) {
					result.push(array[i]);
				}
				return result;
			},
			//查看图书豆瓣信息
			showBookDoubanInfo(row) {
				row.value = this.value;
				row.selectLocation = this.location;
				row.searchModel = this.searchModel;
				row.currentPage = this.currentPage;
				row.pageSize = this.pageSize;
				this.$emit('changeView', 'DouBanInfo', row);
			},
			formateDate(array) {
				for(var i = 0; i < array.length; i++) {
					var index1 = array[i].bindtime.indexOf("T");
					array[i].bindtime = array[i].bindtime.substring(0, index1) + " " + array[i].bindtime.substring(index1 + 1, index1 + 9);
				}
			},
			selectLocation() {
				this.searchBook();
			},
			//刷新
			reloadDatas() {
				this.isReload = true;
				this.searchBook();
			},
			//查询
			searchBook() {
				var param = {
					barcode: this.value === 1 ? this.searchModel : '',
					tag: this.value === 2 ? this.searchModel : '',
					keyword: this.value === 0 ? this.searchModel : '',
					index: this.currentPage,
					pagesize: this.pageSize,
					order: this.rank,
					queryid: this.location,
					readercode: GloabFun.getReaderCode(),
					begin: this.startTime,
					end: this.endTime,
					order: this.rank,
					uid: "admin"
				}
				HttpServer.httpPost2.call(this, '/Api/Book/Info', param, function(response) {}, function(response) {
					if(response.data.code === 0) {
						this.formateDate(response.data.info);
						this.tableData = response.data.info;
						this.totalSize = response.data.totalcount;
						if(this.isReload) {
							this.$message({
								type: 'success',
								message: this.$t('message.refreshSuccess')
							});
						}
					} else {
						this.$message({
							type: 'error',
							message: response.data.msg
						});
					}
					this.isReload = false;
				});
			},
			getDatas() {
				HttpServer.httpPost2.call(this, '/Api/LibraryLocation/locationByReader', {
					readerkeyid: GloabFun.getReaderKeyid(),
					flag: 1,
				}, function(response) {}, function(response) {
					if(response.data.code === 0) {
						if(response.data.info && response.data.info.length > 0) {
							response.data.info.unshift({LocationKeyId: 0, Name: "全部馆藏地"});
							this.locationDatas = response.data.info;
							if(this.templateObj.currentPage) {
								this.location = this.templateObj.selectLocation;
							} else {
								this.location = response.data.info[0].LocationKeyId;
							}
							this.searchBook();
						}
					} else {
						this.$message({
							type: 'error',
							message: response.data.msg
						});
					}
				})
			}
		},
		created() {
			if(this.templateObj.currentPage) {
				this.currentPage = this.templateObj.currentPage;
				this.pageSize = this.templateObj.pageSize;
				this.searchModel = this.templateObj.searchModel;
				this.value = this.templateObj.value;
			} else {
				this.searchModel = this.templateObj.CurrentView.searchModel;
			}
			if(GloabFun.getReaderCode() != '') {
				this.getDatas();
			}else{
				this.locationDatas.unshift({LocationKeyId: 0, Name: "全部馆藏地"});
				this.location = 0;
				this.searchBook();
			}
			//			if(GloabFun.getReaderCode() != ''){
			//				this.getDatas();
			//			}else{
			//				this.$alert('读者尚未登录', this.$t('message.warning'), {
			//					confirmButtonText: this.$t('message.yes'),
			//					type: 'warning'
			//				});
			//			}
			// this.searchBook();
		},
		mounted() {
			
		}
	}
</script>
<style scoped lang="less">
	.main {
		background-color: #fff;
		border-radius: 10px;
	}
	
	.flex-inline {
		display: flex;
		justify-content: space-between;
	}
	
	.query {
		display: flex;
		float: right;
	}
	
	.name {
		color: #20a0ff;
	}
	
	.el-date-editor.el-input {
		width: 130px;
	}
	
	.edit-mission {
		padding-top: 50px;
		.el-dialog__header {
			background-color: #000;
		}
		.el-dialog__body {
			position: relative;
		}
		.clearfloat {
			height: 100px;
			max-height: 150px;
		}
	}
</style>